<template>
  <div class="fillcontain" v-loading="dataListLoading">
    <bt-col-header title="险种规则定义"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" class="" label-width="120px">
        <div class="row">
          <div class="col-md-4">
            <el-form-item label="险种">
              <el-input v-model="dataForm.riskCode" placeholder="险种" clearable></el-input>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="险种名称">
              <el-input v-model="dataForm.fullName" placeholder="险种名称" clearable></el-input>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="规则导航类型">
              <el-select v-model="dataForm.itemType" filterable clearable placeholder="请选择">
                <div></div>
                <el-option v-for="item in responType" :key="item.itemType" :label="item.name" :value="item.typeId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button :plain="true" type="info" shape="capsule" icon="search" @click="getDataList()">查询</rich-button>
            <rich-button shape="capsule" icon="quit" @click="resetData()">重置</rich-button>
          </div>
        </div>
      </el-form>

      <div class="">
        <!-- 操作按钮 -->
        <div class="btn-padding left">
          <el-button :disabled="btnBoolean" type="info" icon="circle-plus" plain @click="addOrUpdateHandle()">新增
          </el-button>
        </div>

        <!-- 查询结果列表 -->
        <div class="table_container">
          <!-- 列表 -->
          <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="riskType" header-align="center" align="center" label="险种类型">
              <template slot-scope="scope">
                {{ scope.row.riskType | insureFormat }}
              </template>
            </el-table-column>
            <el-table-column prop="itemTypedes" header-align="center" align="center" label="规则导航类型">
            </el-table-column>
            <el-table-column prop="riskCode" header-align="center" align="center" label="险种编码">
            </el-table-column>
            <el-table-column prop="taskNo" header-align="center" align="center" label="所属任务编号">
            </el-table-column>
            <el-table-column prop="abbreviation" header-align="center" align="center" label="险种简称">
            </el-table-column>
            <el-table-column prop="fullName" header-align="center" align="center" label="险种全称">
            </el-table-column>
            <el-table-column prop="lastUpdateId" header-align="center" align="center" label="最后操作人">
            </el-table-column>
            <el-table-column prop="lastUpdateTime" :formatter="dateFormat1" header-align="center" align="center" label="最后操作日期">
            </el-table-column>
            <el-table-column header-align="center" align="center" label="操作" width="200">
              <template slot-scope="scope">
                <el-button :disabled="btnBoolean" v-if="isAuth('scene:edit')" type="text" @click="addOrUpdateHandle(scope.row)">
                  修改
                </el-button>
                <el-button type="text" @click="copyRuest(scope.row)">复制</el-button>
                <el-button type="text" @click="showResult(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination class="float-right mt-2" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.totalPage" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>  
    </div>
    
    <el-dialog title="新增" :close-on-click-modal="false" width="50%" :visible.sync="visible">
      <el-form :model="dataForm2" ref="divisordataForm" :rules="rules" @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="规则导航类型" label-width="120px" prop="itemType">
              <el-select v-model="dataForm2.itemType" filterable clearable placeholder="请选择规则导航类型">
                <div></div>
                <el-option v-for="item in responType" :key="item.itemType" :label="item.name" :value="item.typeId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button :plain="true" type="info" @click="dataFormSubmit()">确定</el-button>
        <el-button @click="visible = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="复制" :close-on-click-modal="false" width="30%" :visible.sync="copyvisible">
      <el-form :inline="true" :model="copydataForm" class="search_container" label-width="120px">
        <el-col>
          <el-form-item label="险种代码">
            <el-select v-model="copydataForm.riskCode" filterable clearable placeholder="请选择">
              <el-option v-for="item in riskCodeList" :key="item.riskCode" :label="item.riskCode" :value="item.riskCode" @click.native.prevent="checkriskCode(item)">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="copySubmit()">确定</el-button>
        <el-button @click="copyvisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  ruleRiskInfo,
  copyRiskRuleInfo,
  riskList,
} from "@/api/ruleConfig/groupInfo";
import { listMenuType } from "@/api/rulesmenu";
import insure from "@/api/insure";
import constant from "@/api/constant";

export default {
  data() {
    return {
      visible: false,
      copyvisible: false,
      rules: {
        itemType: [
          { required: true, message: '请选择规则导航类型', trigger: 'change' }
        ],
      },
      taskinfo2: {},
      checktaskarry: [],
      btnBoolean: true,
      allGroupInfo: [], // 险种类型
      responType: [],
      loading: false,
      templateStr: "",
      showVisbale: false,
      dataForm: {
        riskCode: "",
        fullName: "",
        itemType: "",
      },
      dataForm2: {
        itemType: "", //子类型
      },
      copydataForm: {
        riskCode: "",
      },
      dataList: [],
      riskCodeList: [], // 险种信息
      dataListLoading: false,
      addOrUpdateVisible: false,
      testConditionVisible: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      },
    };
  },
  //利用计算属性
  computed: {
    taskinfo() {
      return this.$store.state.checktaskInfo;
    },
  },
  // 监听执行
  watch: {
    taskinfo: {
      handler: function (newVal, oldVal) {
        // console.log(newVal, oldVal);
        this.taskinfo2 = newVal;
        this.getDataList();
        if (newVal.status == "1") {
          this.btnBoolean = false;
        } else {
          this.btnBoolean = true;
          this.$message.warning("该任务已发布，不能新增或编辑!");
        }
      },
      deep: true,
    },
  },
  created() {
    this.getlistMenuType();
  },
  mounted() {
    this.taskinfo2 = this.$store.state.checktaskInfo;
    this.getDataList();
    this.getriskList();
  },

  components: {},
  methods: {
    // 获取类型
    getlistMenuType() {
      listMenuType({}).then(({ data }) => {
        // console.log(data);
        if (data && data.resultCode === 0) {
          this.responType = data.data;
        }
      });
    },
    // 获取险种信息
    getriskList() {
      riskList({}).then((res) => {
        this.riskCodeList = res.data.data;
      });
    },
    // 复制选择险种代码
    checkriskCode(data) {
      // this.copydataForm.baseRiskCode = data.riskCode
      // this.copydataForm.itemType = data.itemType
    },
    dateFormat1(row, column) {
      let detee = row.lastUpdateTime;
      1970 - 10 - 12;
      // console.log(detee);
      if (detee && detee != null) {
        return constant.dateFormat("YYYY-mm-dd HH:MM:SS", row.lastUpdateTime);
      } else {
        return "";
      }
    },
    copySubmit() {
      let param = {
        taskNo: this.taskinfo2.taskNo,
        prodTaskNo: this.copydataForm.prodTaskNo,
        baseRiskCode: this.copydataForm.baseRiskCode,
        riskCode: this.copydataForm.riskCode,
        itemType: this.copydataForm.itemType,
        id: `${this.copydataForm.id || ""}`,
      };
      copyRiskRuleInfo(param).then((res) => {
        if (res.data.resultCode === 0) {
          this.$message.success("复制成功！");
          this.getDataList();
        } else {
          this.$message.error(res.data.resultMsg);
        }
        this.copyvisible = false;
      });
    },
    // 表单提交
    dataFormSubmit() {
      // console.log(this.dataForm2, "222");
      this.$refs["divisordataForm"].validate((valid) => {
        if (valid) {
          this.visible = false;
          this.$router.push({
            path: "/drools-ruleConfig/zerenrules/edit",
            query: { dataForm2: JSON.stringify(this.dataForm2) },
          });
        } else {
          return false;
        }
      });
    },
    // 启用禁用
    edit(row) {
      let data = row;
      if (row.isEffect === "0") {
        data.isEffect = "1";
      } else {
        data.isEffect = "0";
      }
      if (data.type === "p") {
        data.taskNo = this.taskinfo2.taskNo;
        copyPublishUpdate(JSON.stringify(data)).then((res) => {
          this.getDataList();
        });
      } else {
        updateData(JSON.stringify(data)).then((res) => {
          this.getDataList();
        });
      }
    },
    // 重置查询条件
    resetData() {
      this.dataForm = {
        riskCode: "",
        fullName: "",
        itemType: "",
      };
    },
    copyRuest(data) {
      // console.log(data);
      this.copydataForm.prodTaskNo = data.taskNo;
      this.copydataForm.baseRiskCode = data.riskCode;
      this.copydataForm.itemType = data.itemType;
      this.copydataForm.id = data.id;
      this.copyvisible = true;
    },
    showResult(data) {
      this.$router.push({
        path: `/drools-ruleConfig/zerenrules/edit/${data.id}`,
        query: { data: JSON.stringify(data), isShow: true },
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      // console.log(this.dataForm);
      let params = {
        pageNumber: this.page.pageIndex,
        pageSize: this.page.pageSize,
        riskCode: this.dataForm.riskCode,
        fullName: this.dataForm.fullName,
        itemType: `${this.dataForm.itemType || ""}`,
        taskNo: this.taskinfo2.taskNo || "",
      };
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      ruleRiskInfo(params)
        .then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          let data = res.data.data.list;
          data.forEach((E) => {
            this.responType.forEach((t) => {
              if (E.itemType == t.typeId) {
                E.itemTypedes = t.name;
              }
            });
          });
          this.dataList = data;

          this.page.totalPage = res.data.data.totalCount;
          this.page.pageIndex = res.data.data.currPage;
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
    // 新增 / 修改
    addOrUpdateHandle(data) {
      // console.log(data, "11");
      // 修改
      if (data) {
        this.visible = false;
        this.$router.push({
          path: `/drools-ruleConfig/zerenrules/edit/${data.id}`,
          query: { data: JSON.stringify(data) },
        });
      } else {
        // 新增
        this.dataForm2 = {
          itemType: "", //子类型
        };
        this.visible = true;
      }
    },
    editFlow(id) {
      this.$router.push({ name: "demo-X6", query: { id: id } });
    },
  },
  filters: {
    insureFormat: function (value) {
      return constant.getLabel(value, insure.insurenceTyoe);
    },
    gresponTypeFilter: function (value) {
      return constant.getLabel(value, insure.responType.blend);
    },
  },
};
</script>
<style lang="less" scoped>
body .el-table th.gutter {
  display: table-cell !important;
}

.current-task {
  margin: 20px;

  span {
    font-size: 16px;
    font-weight: 900;
    margin-right: 10px;
  }

  .el-dropdown span {
    font-size: 14px;
    color: #ff0000;
  }
}
</style>
